import { useTokens } from "@/hooks/useTokens"
import { css } from "@emotion/css"
import { Space, Image } from "antd"

export interface CardItemProps {
  name: string;
}

export const CardItem: React.FC<CardItemProps> = (props) => {

  const { token } = useTokens()

  return (
    <div className={css({
      width: '100%',
      textAlign: 'center',
      cursor: 'copy',
      fontSize: 12,
    })} >
      <Space direction="vertical" size={0} >
        <div className={css({
          height: '52px',
          width: '100%',
          border: `1px solid ${token.colorBorder}`,
          paddingInline: 4,
          borderRadius: token.borderRadius,
          marginBottom: 4,
          background: '#f9f9f9',
          ['&:hover']: {
            background: token.colorBorderSecondary,
            transition: '.8s'
          }
        })} >
            <Image  preview={false} src="" />
        </div>
        <span style={{ fontSize: 10 }} >{props.name}</span>
      </Space>
    </div>
  )
}